<template>
  <van-cell title="用户名" is-link :value="user.username" @click="toEdit('username', '用户名', user.username)"/>
  <van-cell title="账号" :value="user.userAccount" />
  <van-cell title="头像" is-link @click="toEdit('avatarUrl', '头像', user.avatarUrl)">
    <img style="height: 48px" :src="user.avatarUrl"/>
  </van-cell>
  <van-cell title="性别" is-link :value="user.gender === 0 ? '男' : '女'" @click="toEdit('gender', '性别', user.gender)"/>
  <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone', '电话', user.phone)"/>
  <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', '邮箱', user.email)"/>
  <van-cell title="注册时间" :value="user.createTime.toISOString()" />


</template>

<script setup lang="ts">
  import {useRouter} from "vue-router";
  import {onMounted} from "vue";
  import myAxios from "../plugins/myAxios";
  import {Toast} from "vant";

  const user = {
    id: 1,
    username: '老喵',
    userAccount: 'yang',
    avatarUrl: 'http://picture.treehole.fun/img/202206131029051.png',
    gender: 0,
    phone: '18539315470',
    email: 'yang@qq.com',
    createTime: new Date(),
  }
  const router = useRouter();

  onMounted(async() => {
    const userListData = await myAxios.get('/user/search/tags', {
      paramsSerializer: params => {
        return qs.stringify(params, {indices: false})
      }
    })
        .then(function (response) {
          console.log('/user/search/tags success', response);
          Toast.success("请求成功");
          return response.data?.data;
        })
        .catch(function (error) {
          console.error('/user/search/tags error', error);
          Toast.fail("请求失败");
        });
    if (userListData) {
      userListData.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags);
        }
      });
      userList.value = userListData;
    }
  });

  const toEdit = (editKey: string, editName: string, currentValue: string) => {
    router.push({
      path: '/user/edit',
      query: {
        editKey,
        editName,
        currentValue,
      }
    })
  }
</script>

<style scoped>

</style>
